{# twig template #}

{% block style %}
<link rel="stylesheet" href="/assets/libs/simplemde-md-editor/dist/simplemde.min.css">
<link rel="stylesheet" href="/assets/libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/src/mder/page/form.css">
{% endblock %}

{% block topScript %}
 <script>
     GVar.articleSettings = {{ page.setting|json_encode|raw }};
     GVar.allowStatus = {{ allowStatus|json_encode|raw }};
     GVar.pageInfo = {
         path: '{{ page.path }}',
         basePath: '{{ page.basePath }}',
         fullPath : '{{ page.fullPath }}',
         urlPath: '{{ path_for('mder-page',{'action': isNew ? 'add' : 'edit'}) }}'
     };
 </script>
{% endblock %}

{% block bottomScript %}
 {% include '_includes/asset-vue.twig' %}
 <script src="/assets/libs/simplemde-md-editor/dist/simplemde.min.js"></script>
 <script src="/assets/libs/highlight/highlight.pack.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 <script src="/assets/src/mder/page/form.js"></script>
{% endblock %}

{% block body %}
<div class="row" id="page-form">
    <div class="col-sm-3">
      <h1>test</h1>
    </div>
    <!-- .col-sm-3 -->

    <!-- .col-sm-9 -->
    <div class="col-sm-9">
      <div class="page-title">
          <h2>
              {{ isNew ?_globals.lang.tl('createPage') : _globals.lang.tl('updatePage') }}:
              <code v-show="pageInfo.path">${ pageInfo.path }</code>
          </h2>
      </div>

      <form action="" method="post" class="">
         {{ _globals.helper.csrfField()|raw }}

          <div class="form-group">
              <label class="control-label" for="article-path">*{{ _globals.lang.tl('pagePath') }}: </label>

              <input type="text" class="form-control" id="article-path" name="page" v-model="pagePath" {% if isNew == false %} disabled {% endif %} required>
              <p class="help-block">{{ _globals.lang.tl('sourcesPath') }} <code>{{ _globals.config.sources.path }}</code>.
                  Page at <code v-show="pageFullPath">${ pageFullPath }</code>
                  {% if isNew == false %}. In the update is not allowed to change the page path. {% endif %}
              </p>

          </div>


          <fieldset>
              <legend>{{ _globals.lang.tl('articleSetting') }}

                  <a class="btn btn-link btn-xs pull-right" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                     <span class="glyphicon glyphicon-chevron-down"></span> {{ _globals.lang.tl('viewPageDefault') }}
                  </a>
              </legend>

              {% include 'mder/_includes/page_set.twig' %}

              <div class="form-group">
                  <div class="row">
                      <div class="col-sm-8">
                          <label for="article-path">{{ _globals.lang.tl('articleAttrSet') }}:</label>
                          <textarea class="form-control" id="article-attribute" rows="12" name="setting" style="font-family: Consolas;font-size: 115%;font-weight: 500;" placeholder="article attribute config..." spellcheck="false" required>{{ page.setting }}</textarea>
                          <p class="help-block">{{ _globals.lang.tl('articleAttrHelp') }} e.g <code>title: this is article title</code></p>
                      </div>
                      <div class="col-sm-4">
                        <div class="panel panel-default">
                          <div class="panel-heading">
                            <h3 class="panel-title">{{ _globals.lang.tl('articleAllowSetting') }}</h3>
                          </div>
                          <div class="panel-body">
                            {% for name in allowSettings %}
                              <span class="label label-info" style="margin: 5px;display: inline-block;">{{ name }}</span>
                            {% endfor %}

                          </div>
                        </div>

                      </div>
                  </div>
              </div>
          </fieldset>

          <fieldset>
              <legend>{{ _globals.lang.tl('articleContent') }}</legend>
              <div class="form-group">
                  <label for="article-content">{{ _globals.lang.tl('articleContent') }}: </label>
                  <textarea class="form-control" id="article-content" placeholder="article content ..." name="content" spellcheck="false" >{{ page.content }}</textarea>
                  <p class="help-block">Example block-level help text here.</p>
              </div>
          </fieldset>

          <button type="submit" class="btn btn-primary col-sm-offset-5">
              <span class="glyphicon glyphicon-send"></span>
              {{ _globals.lang.tl('formSubmit') }}
          </button>
      </form>
    </div>
    <!-- .col-sm-9 -->

</div>
{% endblock %}
